<template>
    <div class="company">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" @upload="upload" :value="item" title="Edit Item" :id="itemID"
                    @submit="confirmSubmit" :action="action" ></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table title="Company List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns isAdd @add="addItem"  isExport @export="exportExcel"
                >
                    <template slot="logo" slot-scope="props">
                        <img :src="`/${props.item.logo}`" width="50" v-if="props.item.logo"/>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'

    // mixin
    import {lifeHookMixin,itemMixin} from '@/mixins/item'

    export default {
        name: "Company",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
            this.model = 'Company'
            this.defaultColumns = [
                {label: 'Actions', key: 'actions', type: 'actions', tdAlign: 'center'},
                {label: 'id', key: 'id', value: '', sort: true, filter: true, edit: false},
                {label: 'company_name', key: 'company_name', value: '', sort: true, filter: true, edit: true, add:true, required: true, defaultFilter: true},
                {label: 'logo', key: 'logo', value: '', edit: true, add:true, inputType: 'upload'},
                {label: 'account', key: 'host_user__id', value: '', sort: true, filter: true, edit: false, add:true, required: true},
                {label: 'password', key: 'password_hook', value: '', sort: true, filter: false, edit: true, add:true, required: true, inputType: 'password', hide: true},
                {label: 'remark', key: 'remark', filterKey:'remark__icontains', value: '', sort: true, filter: true, edit: true, add:true, inputType: 'textarea'},
            ]
        }
    }
</script>

<style scoped>

</style>